import { memo, Fragment, useId } from "react";
import styles from "../../index.module.css";
import { SFields, SCard } from "@cnjingx/antd-components";
import NTable from "@/components/n-table";
import { getIdCardColumns, items } from "./config";

const PersonalBaseInfo = (props) => {
  const {
    data,
    loading,
    spouseItems,
    spouseColumns,
    residenceColumns,
    residenceItems,
    companyColumns,
    companyItems,
    jobColumns,
    jobItems,
  } = props;
  const key = useId();
  const columns = getIdCardColumns();
  return (
    <Fragment key={key}>
      <div className={styles.title} style={{ marginTop: "16px" }}>
        个人基本信息
      </div>
      <SFields configs={{ title: "身份信息" }} loading={loading} items={items}>
        <NTable columns={columns} dataSource={data} bordered></NTable>
      </SFields>
      <SCard
        className={styles.mgn16}
        configs={{ title: "配偶信息" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          columns={spouseColumns}
          dataSource={spouseItems}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "居住信息" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable columns={residenceColumns} dataSource={residenceItems} bordered/>
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "职业信息" }}
        loading={loading}
        isShowExtra={false}

      >
        <NTable columns={companyColumns} dataSource={companyItems} bordered/>
        <NTable columns={jobColumns} dataSource={jobItems} bordered/>
      </SCard>
    </Fragment>
  );
};

export default memo(PersonalBaseInfo);
